<template>
  <div class="">
    <el-dialog
      :modal="false"
      okText="打印"
      :title="title"
      @close="handleCancel"
      :visible="visible"
      width="900px"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleOk"
          >打 印</el-button
        >
      </span>
      <div v-loading="infoloading" ref="invoiceDtl" class="fontType printbox">
        <div class="title">
          <div>浙江横店航空小镇有限公司</div>
        </div>

        <div class="sub_title">
          <div class="order_type">
            {{ printData.order_type == 1 ? "出厂单" : "入厂单" }}
          </div>
          <div class="text-flex">
            <span>№：{{ printData.gross_device_num }}</span>
            <span>日期：{{ new Date().format("yyyy-MM-dd") }}</span>
          </div>
        </div>

        <table border="1" cellspacing="0" cellpadding="0">
          <tr></tr>
          <tr class="fontType">
            <td>车牌号码</td>
            <td>{{ printData.vehicle_num }}</td>
            <td>
              <span>货物名称</span>
            </td>
            <td>
              <span style="display:inline-block;min-width:30px">{{
                printData.payload
              }}</span>
            </td>
            <td>毛重（吨）</td>
            <td>
              {{ printData.gross_weight || 0 }}
            </td>
          </tr>
          <tr class="fontType">
            <td>毛重时间</td>
            <td colspan="3">{{ printData.gross_time }}</td>
            <td>皮重（吨）</td>
            <td>
              {{ printData.tare_weight || 0 }}
            </td>
          </tr>
          <tr class="fontType">
            <td>发货单位</td>
            <td colspan="3">{{ printData.vender }}</td>
            <td>净重（吨）</td>
            <td>
              {{ printData.net_weight || 0 }}
            </td>
          </tr>
          <tr class="fontType">
            <td>承运单位</td>
            <td colspan="3"></td>
            <td>单价</td>
            <td>{{ unitPrice }}</td>
          </tr>
          <tr class="fontType">
            <td>收货单位</td>
            <td colspan="3">{{ printData.customer }}</td>
            <td>金额</td>
            <td>{{ price }}</td>
          </tr>
        </table>

        <div class="text-flex" style="margin-top: 10px">
          <div>白联：存根</div>
          <div>红联：结算</div>
          <div>蓝联：客户</div>
          <div>黄联：记账</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLoadometerInfo, print } from "@/api/public";

export default {
  props: {
    activeType: {}
  },
  components: {},
  data() {
    return {
      title: "",
      visible: false,
      visibleEdit: false,
      loading: false,
      infoloading: false,
      printData: {},
      isEdit: false
    };
  },

  computed: {
    // 销售磅单 且 收货单位包含“散户” 显示单价和金额
    unitPrice() {
      if (
        this.printData.order_type == 1 &&
        this.printData.customer &&
        this.printData.customer.indexOf("散户") > -1
      ) {
        return this.printData.unit_price;
      } else {
        return "***";
      }
    },
    price() {
      if (
        this.printData.order_type == 1 &&
        this.printData.customer &&
        this.printData.customer.indexOf("散户") > -1
      ) {
        return (
          Number(this.printData.unit_price) * Number(this.printData.net_weight)
        ).toFixed(2);
      } else {
        return "***";
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    reset() {
      this.printData = {};
      this.visible = false;
    },
    async handleOk() {
      this.loading = true;
      print(this.printData.id_, window.userConfig.tenantId)
        .then(response => {
          if (response.state) {
            this.$print(this.$refs.invoiceDtl, { targetStyles: ["*"] });
            this.$emit("refresh");
            this.visible = false;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.$message.error(response.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取打印信息
    getInfo() {
      this.infoloading = true;

      getLoadometerInfo(this.activeId)
        .then(response => {
          let info = response.data.loadometer || {};
          this.printData = {
            ...info
          };
        })
        .finally(() => {
          this.infoloading = false;
        });
    },
    handleCancel() {
      this.reset();
    },
    showModal(data = {}) {
      this.title = "出场单预览";
      this.visible = true;
      if (JSON.stringify(data) !== "{}") {
        this.printData = data;
      } else {
        this.getInfo();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.fontType {
  font-family: serif;
  font-weight: 800;
  color: black;
}

.title {
  position: relative;
  font-size: 22px;
  margin-bottom: 15px;
  text-align: center;
}
.sub_title {
  position: relative;

  .order_type {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    letter-spacing: 1em;
  }
}

td {
  border: 1px solid #000;
}

table,
table tr th,
table tr td {
  border: 1px solid #000;
  padding: 0 3px;
  font-size: 18px;
}

.text-flex {
  margin-top: 5px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}

table {
  width: 100%;
  font-size: 18px;
  text-align: center;
  border-collapse: collapse;
  min-height: 32px;
  line-height: 32px;
  margin-top: 15px;
}

.printbox {
  max-width: 720px;
}

::v-deep {
  .el-dialog__body {
    padding: 20px;
  }
}
</style>
